document.addEventListener('DOMContentLoaded', function() {
    const form = document.getElementById('namingForm');
    const suggestionsList = document.getElementById('suggestionsList');
    const suggestionsCard = document.getElementById('suggestions');

    // 转换命名风格的工具函数
    const nameStyleConverter = {
        // 转换为小驼峰: userInputData
        camelCase: (str) => {
            const words = str.toLowerCase().split(/[\s-_]+/);
            return words[0] + words.slice(1).map(word => word.charAt(0).toUpperCase() + word.slice(1)).join('');
        },
        // 转换为大驼峰: UserInputData
        pascalCase: (str) => {
            const words = str.toLowerCase().split(/[\s-_]+/);
            return words.map(word => word.charAt(0).toUpperCase() + word.slice(1)).join('');
        },
        // 转换为下划线: user_input_data
        snakeCase: (str) => {
            return str.toLowerCase().split(/[\s-]+/).join('_');
        },
        // 转换为大写下划线: USER_INPUT_DATA
        upperSnakeCase: (str) => {
            return str.toUpperCase().split(/[\s-]+/).join('_');
        },
        // 转换为短横线: user-input-data
        kebabCase: (str) => {
            return str.toLowerCase().split(/[\s_]+/).join('-');
        }
    };

    form.addEventListener('submit', function(e) {
        e.preventDefault();
        
        const description = document.getElementById('description').value;
        const language = document.getElementById('language').value;
        
        // 模拟API调用的示例建议
        const mockSuggestions = [
            {
                baseName: 'user input data',
                explanation: '表示用户输入的数据'
            },
            {
                baseName: 'data processor',
                explanation: '用于处理数据的函数'
            },
            {
                baseName: 'result array',
                explanation: '存储处理结果的数组'
            }
        ];

        displaySuggestions(mockSuggestions);
    });

    function displaySuggestions(suggestions) {
        suggestionsList.innerHTML = '';
        suggestionsCard.classList.remove('hidden');
        
        // 限制变量名长度的函数
        const truncateVariableName = (name) => {
            const maxLength = 20;
            if (name.length > maxLength) {
                return name.substring(0, maxLength) + '...';
            }
            return name;
        };

        suggestions.forEach((suggestion, index) => {
            const suggestionElement = document.createElement('div');
            suggestionElement.className = 'suggestion-item';
            
            // 修改 nameStyles 对象，确保生成的变量名不会太长
            const nameStyles = {
                'camelCase 小驼峰': truncateVariableName(nameStyleConverter.camelCase(suggestion.baseName)),
                'PascalCase 大驼峰': truncateVariableName(nameStyleConverter.pascalCase(suggestion.baseName)),
                'snake_case 下划线': truncateVariableName(nameStyleConverter.snakeCase(suggestion.baseName)),
                'UPPER_SNAKE_CASE 大写下划线': truncateVariableName(nameStyleConverter.upperSnakeCase(suggestion.baseName)),
                'kebab-case 短横线': truncateVariableName(nameStyleConverter.kebabCase(suggestion.baseName))
            };

            // 创建HTML内容时添加动态类名
            const nameStylesHtml = Object.entries(nameStyles)
                .map(([style, name], styleIndex) => `
                    <div class="name-style-item style-${styleIndex}" data-name="${name}" data-full-name="${name}">
                        <div class="style-label">${style}</div>
                        <div class="style-value">
                            <code title="${name}">${name}</code>
                            <button class="copy-btn" title="点击复制">
                                <svg class="copy-icon" viewBox="0 0 24 24" width="16" height="16">
                                    <path fill="currentColor" d="M16 1H4c-1.1 0-2 .9-2 2v14h2V3h12V1zm3 4H8c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h11c1.1 0 2-.9 2-2V7c0-1.1-.9-2-2-2zm0 16H8V7h11v14z"/>
                                </svg>
                            </button>
                        </div>
                    </div>
                `).join('');

            suggestionElement.innerHTML = `
                <div class="suggestion-header">
                    <div class="suggestion-explanation">${suggestion.explanation}</div>
                </div>
                <div class="name-styles-container">
                    ${nameStylesHtml}
                </div>
            `;
            
            // 添加复制功能
            suggestionElement.querySelectorAll('.name-style-item').forEach(item => {
                const copyBtn = item.querySelector('.copy-btn');
                copyBtn.addEventListener('click', (e) => {
                    e.stopPropagation();
                    const name = item.dataset.name;
                    navigator.clipboard.writeText(name)
                        .then(() => {
                            // 添加复制成功的视觉反馈
                            item.classList.add('copy-feedback');
                            const originalText = copyBtn.innerHTML;
                            copyBtn.innerHTML = `
                                <svg class="check-icon" viewBox="0 0 24 24" width="16" height="16">
                                    <path fill="currentColor" d="M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41L9 16.17z"/>
                                </svg>
                            `;
                            
                            setTimeout(() => {
                                item.classList.remove('copy-feedback');
                                copyBtn.innerHTML = originalText;
                            }, 1000);
                        })
                        .catch(err => console.error('复制失败:', err));
                });
            });
            
            suggestionsList.appendChild(suggestionElement);
        });
    }
});

// 修改打赏弹窗控制函数
function showDonateModal() {
    const modal = document.getElementById('donateModal');
    const content = modal.querySelector('.modal-content');
    
    // 显示模态框
    modal.style.display = 'block';
    modal.classList.add('active');
    
    // 添加展开动画
    content.style.animation = 'expandFromCircle 0.5s ease forwards';
    
    // 移除圆形类并显示内容
    setTimeout(() => {
        content.classList.remove('circle');
    }, 400); // 延迟到动画接近完成时移除圆形类
}

function closeDonateModal() {
    const modal = document.getElementById('donateModal');
    const content = modal.querySelector('.modal-content');
    
    // 添加圆形类触发内容隐藏
    content.classList.add('circle');
    
    // 等待内容隐藏的过渡完成后开始收缩动画
    setTimeout(() => {
        content.style.animation = 'shrinkToCircle 0.5s ease forwards';
    }, 200);
    
    // 重置状态
    setTimeout(() => {
        content.style.animation = '';
    }, 700);
}

// 初始化时设置为圆形
document.addEventListener('DOMContentLoaded', function() {
    const modal = document.getElementById('donateModal');
    const content = modal.querySelector('.modal-content');
    
    // 显示初始圆形状态
    content.classList.add('circle');
    modal.style.display = 'block';
    modal.classList.add('active');
    
    // 添加点击圆形时展开的事件
    content.addEventListener('click', function(e) {
        if (content.classList.contains('circle')) {
            showDonateModal();
        }
    });
});

// 移除原来的 window.onclick 事件，改为点击关闭按钮关闭
document.querySelector('.close-modal').addEventListener('click', function(e) {
    e.stopPropagation();
    closeDonateModal();
});

// 动态背景动画
document.addEventListener('DOMContentLoaded', function() {
    const cubes = document.querySelectorAll('.cube');
    cubes.forEach(cube => {
        cube.style.left = `${Math.random() * 100}%`;
        cube.style.top = `${Math.random() * 100}%`;
    });
}); 